<template>
	<view class="product-list">
		<view class="sort-bar">
			<view class="sort-item" @tap="sortBy('综合')">
				综合 <text>{{ getSortIcon('综合') }}</text>
			</view>
			<view class="sort-item" @tap="sortBy('销量')">
				销量 <text>{{ getSortIcon('销量') }}</text>
			</view>
			<view class="sort-item" @tap="sortBy('价格')">
				价格 <text>{{ getSortIcon('价格') }}</text>
			</view>
			<view class="sort-item" @tap="openFilterPopup">筛选</view>
		</view>
		<view class="product-grid">
			<view class="product-item" v-for="product in sortedProducts" :key="product.id">
				<image :src="product.image" mode="aspectFill" />
				<view class="product-info">
					<view class="product-name">{{ product.name }}</view>
					<view class="product-price">
						<text class="current-price">¥{{ product.currentPrice.toFixed(2) }}</text>
						<text class="original-price"
							v-if="product.originalPrice">¥{{ product.originalPrice.toFixed(2) }}</text>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="filterPopup" type="bottom">
			<view class="filter-popup">
				<view class="filter-title">筛选</view>
				<view class="filter-options">
					<view class="filter-group">
						<view class="filter-label">销量</view>
						<view class="filter-buttons">
							<button :class="['filter-button', {'active': filter.sales === 'high'}]"
								@tap="setFilter('sales', 'high')">从高到低</button>
							<button :class="['filter-button', {'active': filter.sales === 'low'}]"
								@tap="setFilter('sales', 'low')">从低到高</button>
						</view>
					</view>
					<view class="filter-group">
						<view class="filter-label">价格</view>
						<view class="filter-buttons">
							<button :class="['filter-button', {'active': filter.price === 'high'}]"
								@tap="setFilter('price', 'high')">从高到低</button>
							<button :class="['filter-button', {'active': filter.price === 'low'}]"
								@tap="setFilter('price', 'low')">从低到高</button>
						</view>
					</view>
				</view>
				<button class="apply-filter" @tap="applyFilter">应用筛选</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sortField: '综合',
				sortOrder: 'asc',
				filter: {
					sales: '',
					price: ''
				},
				products: [{
						id: 1,
						name: 'BANDALY 2020夏季女装连衣裙韩版大码宽松显瘦套装',
						image: '/static/product1.jpg',
						currentPrice: 129.00,
						originalPrice: 219.00,
						sales: 500
					},
					{
						id: 2,
						name: '花花公子 卫衣男秋季圆领薄款休闲体恤男士时尚长袖T恤',
						image: '/static/product2.jpg',
						currentPrice: 99.00,
						originalPrice: 139.00,
						sales: 300
					},
					{
						id: 3,
						name: '[两件套] 花花公子PLAYBOY超帅T恤男套装',
						image: '/static/product3.jpg',
						currentPrice: 159.00,
						originalPrice: 259.00,
						sales: 400
					},
					{
						id: 4,
						name: '雪域森林短袖T恤男装2020夏季潮流时尚衣服男潮牌',
						image: '/static/product4.jpg',
						currentPrice: 89.00,
						originalPrice: 129.00,
						sales: 200
					},
					{
						id: 5,
						name: '简约风格连衣裙',
						image: '/static/product5.jpg',
						currentPrice: 199.00,
						originalPrice: 299.00,
						sales: 150
					},
					{
						id: 6,
						name: '时尚牛仔外套',
						image: '/static/product6.jpg',
						currentPrice: 259.00,
						originalPrice: 359.00,
						sales: 180
					},
					{
						id: 7,
						name: '轻薄防晒衣',
						image: '/static/product7.jpg',
						currentPrice: 119.00,
						originalPrice: 169.00,
						sales: 220
					},
					{
						id: 8,
						name: '百搭休闲裤',
						image: '/static/product8.jpg',
						currentPrice: 149.00,
						originalPrice: 199.00,
						sales: 280
					}
				]
			}
		},
		computed: {
			sortedProducts() {
				let sorted = [...this.products];

				if (this.filter.sales) {
					sorted.sort((a, b) => this.filter.sales === 'high' ? b.sales - a.sales : a.sales - b.sales);
				} else if (this.filter.price) {
					sorted.sort((a, b) => this.filter.price === 'high' ? b.currentPrice - a.currentPrice : a.currentPrice -
						b.currentPrice);
				} else if (this.sortField === '销量') {
					sorted.sort((a, b) => this.sortOrder === 'asc' ? a.sales - b.sales : b.sales - a.sales);
				} else if (this.sortField === '价格') {
					sorted.sort((a, b) => this.sortOrder === 'asc' ? a.currentPrice - b.currentPrice : b.currentPrice - a
						.currentPrice);
				}

				return sorted;
			}
		},
		methods: {
			sortBy(field) {
				if (this.sortField === field) {
					this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
				} else {
					this.sortField = field;
					this.sortOrder = 'asc';
				}
				this.filter = {
					sales: '',
					price: ''
				}; // 清除筛选
			},
			getSortIcon(field) {
				if (this.sortField !== field) return '';
				return this.sortOrder === 'asc' ? '↑' : '↓';
			},
			openFilterPopup() {
				this.$refs.filterPopup.open();
			},
			setFilter(type, value) {
				this.filter[type] = this.filter[type] === value ? '' : value;
			},
			applyFilter() {
				this.$refs.filterPopup.close();
				this.sortField = '综合'; // 重置排序字段
			}
		}
	}
</script>

<style scoped>
	.filter-popup {
		background-color: #fff;
		padding: 20px;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}

	.filter-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
		text-align: center;
	}

	.filter-group {
		margin-bottom: 20px;
	}

	.filter-label {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.filter-buttons {
		display: flex;
		justify-content: space-between;
	}

	.filter-button {
		width: 45%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
		background-color: #fff;
		font-size: 14px;
	}

	.filter-button.active {
		background-color: #007aff;
		color: #fff;
	}

	.apply-filter {
		width: 100%;
		padding: 10px;
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		margin-top: 20px;
	}

	.product-list {
		padding: 10px;
	}

	.sort-bar {
		display: flex;
		justify-content: space-around;
		padding: 10px 0;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.sort-item {
		font-size: 14px;
		color: #333;
	}

	.product-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.product-item {
		width: 48%;
		margin-bottom: 15px;
		background-color: #fff;
		border-radius: 5px;
		overflow: hidden;
	}

	.product-item image {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}

	.product-info {
		padding: 10px;
	}

	.product-name {
		font-size: 14px;
		color: #333;
		margin-bottom: 5px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-price {
		display: flex;
		align-items: baseline;
	}

	.current-price {
		font-size: 16px;
		color: #ff6700;
		font-weight: bold;
	}

	.original-price {
		font-size: 12px;
		color: #999;
		text-decoration: line-through;
		margin-left: 5px;
	}
</style>